<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 接口列表页数据展示</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(list,index) in lists" :key="index">
            <a :href="'post.html?id='+ list.artical_id"> {{ list.title }}</a>
            <p>{{ list.datetime }}</p>
        </li>
    </ul>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>

<script>
    new Vue({
        el:"#app",
        data:{
            lists:[]
        },
        mounted(){
          axios.get("http://192.168.84.130/Api_demo/Api/artical.php")
            .then(res=>{
                // console.log(res);
                this.lists = res.data;
            })
        }
    })
</script>
</body>
</html>